<template>
  <div class="header">
    <div class="left">
      <div class="city-fixed">
        <router-link to="/city" tag="div">
          <span>{{address}}</span>
          <i class="iconfont icon-xiala-"></i>
        </router-link>
      </div>
    </div>
    <div class="title">{{title}}</div>
      <div class="right">
        <!-- <router-link to="/search">
          <i class="iconfont icon-sousuo1" v-show="$store.state.isShowBack"></i>
        </router-link> -->
         <i class="iconfont icon-sousuo1" v-show="$store.state.isShowBack" @click="add('showing')"></i>
         
    </div>
  </div>
</template>

<script>
import { computed, toRefs } from '@vue/runtime-core';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
  name:'Title',
  setup(props) {
    
    const store = useStore()
    const address = computed(()=>{
        return store.state.city.name
    });

    const router = useRouter();
    
    const add = (name)=>{
      router.push(`/${name}/search`)
    }
  
  const title = computed(()=>{
    return store.state.title
  })
 
    return {
     address,
     add,
     title
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 44px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  z-index: 300;
  display: flex;
  background: #fff;
  .title {
    width: 72%;
    text-align: center;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #191a1b;
  }
  .left {
    width: 14%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 15px;
    > i {
      margin-left: 10px;
      font-size: 19px;
    }
   
  }
  .right{
    width: 15%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    >i{
        font-size: 19px;
        color: #191a1b;
    }
  }
}
span{
  font-size: 14px;
  color: #191a1b;
}

// 定位
// .city-fixed {
//   position: absolute;
//   top: 10px;
//   left: 7px;

//   z-index: 10;
//   font-size: 13px;

//   height: 30px;
//   line-height: 30px;
//   border-radius: 15px;
//   text-align: center;
//   padding: 0 5px;

//   & a{
//     color: #191a1b;
// 	.iconfont {
//     font-size: 15px;
//   }
//   }
// }
</style>